<!-- 
<link rel="stylesheet" href="https://at.alicdn.com/t/font_3120366_9utchxxpyz.css">
 -->
 <template>
    <!-- 最外层 -->
    <div class="container">
      <!-- 内容部分 -->
      <!-- <main class="box">
        <header class="header">
          <span>头部-内容</span>
        </header>
  
        <div class="content">
          内容-部分
        </div>
      </main> -->
      <!-- 路由出口 -->
      <!-- 不添加名称的时候使用的就是 default -->
      <!-- <router-view></router-view> -->
      <!-- <router-view v-slot="{ Component }">
        <transition>
          <component :is="Component" />
        </transition>
      </router-view> -->
  
      <router-view v-slot="{ Component }">
        <!-- 做过渡 -->
        <transition>
          <!-- 做缓存 -->
          <keep-alive include="Home">
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
  
  
      <!-- 页脚部分 tabBar -->
      <router-view name="footer"></router-view>
  
      <!-- 提示用户不能横屏使用 -->
      <div class="tip">请将屏幕切换至竖屏使用！</div>
  
    </div>
  </template>
  <style lang="scss">
  $main-color: #f66;
  
  html,
  body,
  #app,
  .container {
    height: 100%;
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    /*
      目前百分之 90 以上的 UI 设计师会使用 iPhone6,7,8 作为设计图的尺寸进行设置设计
      如果设计图是 iPhone6,7,8 作为基础图，那么我们就 100 / 375 * 100 = 26.6666666..
      如果设计图是 iPhone plus 作为基础图，那么我们就 100 / 414 * 100 = 24.154
      这样设置的话： 1rem = 100px    12px = 0.12rem   0.5rem = 50px
    */
    font-size: 26.66666666vw;
  }
  
  body {
    // 具体值取决的设计图中出现最多字号的大小
    font-size: 0.14rem;
  }
  
  .container {
    display: flex;
    flex-direction: column;
    // overflow: hidden;
  
    .box {
      flex: 1;
      background-color: #f5f5f5;
      display: flex;
      flex-direction: column;
      overflow: auto;
  
  
      .header {
        height: 0.44rem;
        background-color: $main-color;
        line-height: 0.44rem;
        text-align: center;
        color: white;
      }
  
      .content {
        flex: 1;
        overflow: auto;
      }
    }
  
    .footer {
      height: 0.5rem;
      // background-color: #f66;
      display: flex;
      border-top: 1px solid #ccc;
  
      a {
        flex: 1;
        text-decoration: none;
        color: black;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        // 设置点击的样式
        -webkit-tap-highlight-color: transparent;
  
        .iconfont {
          font-size: .16rem;
        }
      }
  
      .router-link-active {
        color: $main-color;
      }
    }
  }
  
  .tip {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: .3rem;
    color: white;
  }
  
  // 监听屏幕为横屏
  @media (orientation: landscape) {
    .tip {
      display: flex;
    }
  }
  
  /* 下面我们会解释这些 class 是做什么的 */
  .v-enter-active {
    transition: all 1s ease;
    opacity: 0;
    // position: relative;
    // left: 100%;
  }
  
  .v-enter-to {
    opacity: 1;
    // left: 0%;
  }
  </style>